<template>
	<div class="content">
		<Table stripe :columns="columns" :data="configList" ref="table" :loading="loading"></Table>
		<Modal v-model="modal1" title="修改配置" width='40%' :mask-closable="false">
			<Form :label-width="100">
				<FormItem label="id" prop="id">
					<Input class="w-50" v-model="edit.id" placeholder="" disabled/>
				</FormItem>
				<FormItem label="服务器IP" prop="grpcIp">
					<Input class="w-50" v-model="edit.grpcIp" placeholder="请输入服务器IP地址" />
				</FormItem>
				<FormItem label="服务器端口号" prop="grpcPort">
					<Input class="w-50" v-model="edit.grpcPort" placeholder="请输入服务器端口号" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="modal1 = false;">取消</Button>
				<Button type="primary" size="large" @click="editSubmit">确定</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				pageSize: 1000,
				configList: [],
				modal1: false,
				loading: true,
				edit: {
					levelId: '',
					pushNum: '',
					layer: '',
					profitRatio: '',
				},
				rules: {
					pushNum: [{
						required: true,
						message: '直推实名认证用户数量不能为空',
						trigger: 'blur',
					}],
					layer: [{
						required: true,
						message: "节内的团队人数不能为空",
						trigger: "blur"
					}],
					profitRatio: [{
						required: true,
						message: "手续费百分比不能为空",
						trigger: "blur"
					}],
				},
				columns: [{
						title: 'id',
						key: 'id',
						align: 'center',
					},
					{
						title: '服务器IP',
						key: 'grpcIp',
						align: 'center',
					},
					{
						title: '服务器端口号',
						key: 'grpcPort',
						align: 'center',
					},
					{
						title: '操作',
						key: 'action',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h(
									'Button', {
										props: {
											type: 'primary',
											size: 'small',
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.modal1 = true;
												this.axios.get('/admin/settings/coin/grpc').then(res => {
													if(res.data.code == 200) {
														this.edit = res.data.data[params.index];
													}
												})
											}
										}
									},
									'编辑'
								),
							])
						}

					}
				]
			}
		},
		created() {

		},
		mounted() {
			this.$Message.config({
				top: 250
			});
			this.getConfig(); // 其他配置查询
		},
		methods: {
			getConfig() { // 其他配置查询
				this.axios.get('/admin/settings/coin/grpc').then(res => {
					if(res.data.code == 200) {
						this.configList = res.data.data;
						this.loading = false;
					}
				})
			},
			editSubmit() {
				let params = this.qs.stringify({
					id: this.edit.id,
					grpcIp: this.edit.grpcIp,
					grpcPort: this.edit.grpcPort,
				})
				this.axios.put('/admin/settings/coin/grpc', params).then(res => {
					if(res.data.code == 200) {
						this.$Message.info(res.data.msg);
						this.modal1 = false;
						this.getConfig();
					}
				}).catch(err => {
					this.$Message.info('系统错误');
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.p-10 {
		padding-top: 0 !important;
		padding-left: 50px !important;
	}
	
	.w50 {
		width: 50px !important;
	}
	
	.w25 {
		width: 25px !important;
	}
	
	.w120 {
		width: 120px !important;
	}
	
	.mar {
		margin-left: 5px;
	}
	
	.pl-100 {
		padding-left: 100px;
	}
</style>